<template>
    <div>
        <el-container class="container">
            <!-- 导航栏 -->
            <!--  -->
            <el-menu
                id="menu"
                class="el-menu-vertical-demo"
                background-color="#304156"
                text-color="#BFCBD9"
                active-text-color="#ffd04b"
                :collapse="isCollapse"
                :router="true"
                
            >
                <!-- 学生管理 -->
                <router-link to="/home" style="text-decoration: none;">
                   <el-menu-item index="2">
                    <span slot="title">首页</span>
                </el-menu-item>
                </router-link>
                <el-submenu
                    class="submenu"
                    v-for="item in goodsListData"
                    :key="item.index"
                    :index="item.index"
                >
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item
                        v-for="ListedItem in item.list"
                        :key="ListedItem.index"
                        :index="ListedItem.index"
                        >{{ ListedItem.title }}</el-menu-item
                    >
                </el-submenu>
            </el-menu>
            <el-container class="right">
                <el-header class="header">
                    <!-- 设置开关 -->
                    <div>
                        <div class="icon">
                            <img
                                class="img1"
                                @click="BtnAside"
                                src="../assets/header/icon.png"
                                alt=""
                            />
                        </div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <img
                                    class="img2"
                                    src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
                                    alt=""
                                />
                                <i
                                    class="el-icon-arrow-down el-icon--right"
                                ></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <router-link
                                    to="/home"
                                    style="text-decoration: none"
                                    ><el-dropdown-item
                                        >主页</el-dropdown-item
                                    ></router-link
                                >
                                <router-link
                                    to="/login"
                                    style="text-decoration: none">
                                    <el-dropdown-item  v-if="status">登出</el-dropdown-item>
                                    <el-dropdown-item v-else>登录</el-dropdown-item>
                                </router-link>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
// @ is an alias to /src
export default {
    components: {},
    data() {
        return {
            isCollapse: false,
            // 导航栏数据
            goodsListData: [
                {
                    index: "2",
                    title: "产品管理",
                    list: [
                        { index: "/home/terminalManage", title: "定期管理" },
                        { index: "/home/DueOnDemand", title: "活期管理" },
                        { index: "/home/goldManagement", title: "黄金管理" },
                        { index: "/home/fundmanagement", title: "基金管理" },
                        { index: "/home/bankmanagement", title: "银行管理" },
                        { index: "/home/FundManagerManagement", title: "基金经理管理" },
                        { index: "/home/peopleOnline", title: "在线人数" },
                    ],
                },
                {
                    index: "3",
                    title: "设置",
                    list: [
                        { index: "/home/personnelManage", title: "员工管理" },
                        { index: "/home/RoleList", title: "角色管理" },
                        { index: "/home/appCode", title: "APPcode值修改" },
                        { index: "/home/CouponManagement", title: "优惠券管理" },
                    ],
                },
            ],
            num: 0,
        };
    },
    computed:{
        status(){
            return localStorage.token
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        //
        BtnAside() {
            this.num += 90;
            this.isCollapse = !this.isCollapse;
            // 获取id
            const icon = document.querySelector(".icon");
            icon.style.transform = `rotate(${this.num}deg)`;
            icon.style.transition = ".5s";
        },
    },
};
</script>
<style scoped lang="scss">

.container {
    height: 100vh;
   
}
.aside {
    background-color: rgb(48, 65, 86);
    color: #fff;
}
.menu {
    background-color: rgb(48, 65, 86);
    color: white;
    width: 20%;
}
.right{
     width: 80%;;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
// 头部header 需要的css样式
.header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    div {
        height: 100%;
        text-align: left;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }
    div:nth-child(1) {
        font-size: 14px;
        .img1 {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    }
    .icon {
        margin-right: 20px;
    }
}

// 头部右边头像区域
.el-dropdown-link {
    cursor: pointer;
    height: 100%;
    line-height: 60px;
    .img2 {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        border-radius: 10px;
    }
}
.el-container {
    height: 100vh;
}
.el-header {
    background-color: #b3c0d1;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left: 50px;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>
 